<style>
.myCenter {
    display: flex;
    justify-content: center;
    align-items: center;
}

.authorInfo {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: white;
    .authorInfoRow {
        width: 100%;
        display: flex;

        .authorINfoTopLeft {
            width: 25%;
            margin-right: 15px;

            img {
                border-radius: 50%;
                width: 100%;
            }
        }

        .authorINfoTopRight {}

        .authorInfoCol {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

    }
}

.canClick {
    cursor: pointer;
    padding: 10px 20px;
    border-color: #ccccd7;
    border-radius: 50px;
    border-style: solid;
    border-width: 1px;
}
.canClick:active{
    background-color: rgba(184, 219, 112,0.7);
}
</style>
<template>
    <div>
        <div class="authorInfo">
            <div class="authorInfoRow" @click="jump(`/personCenter/${userInfo.id}`)">
                <div class="authorINfoTopLeft">
                    <img :src="userInfo.avatar" alt="">
                </div>
                <div class="authorINfoTopRight">
                    <div>
                        {{ userInfo.nickname }}
                    </div>
                </div>
            </div>
            <div class="authorInfoRow">
                <div class="authorInfoCol myCenter">
                    <div>
                        {{ userInfo.allViews ? userInfo.allViews : 0 }}
                    </div>
                    <div>
                        总浏览量
                    </div>
                </div>
                <div class="authorInfoCol myCenter">
                    <div>
                        {{ userInfo.articlenum ? userInfo.articlenum : 0 }}
                    </div>
                    <div>
                        文章数量
                    </div>
                </div>
                <div class="authorInfoCol myCenter">
                    <div>
                        {{ userInfo.fensNum ? userInfo.fensNum : 0 }}
                    </div>
                    <div>
                        粉丝数量
                    </div>
                </div>
            </div>
            <div class="authorInfoRow">
                <div class="authorInfoCol">
                    <div>
                        个性签名：
                    </div>
                    <div>
                        {{ userInfo.signature ? userInfo.signature : '这个人很懒，什么都没有留下' }}
                    </div>
                </div>
            </div>
            <div class="authorInfoRow">
                <!-- <div style="width: 50%;">
                    <div class="canClick myCenter" @click="toChat">
                        私信
                    </div>
                </div> -->
                <div style="width: 100%;display: flex;justify-content: center;">
                    <div class="canClick myCenter" @click="follow(1)" v-if="isMe && isFollow==0">
                        关注
                    </div>
                    <div class="canClick myCenter" @click="follow(0)" v-else-if="isMe && isFollow==1">
                        已关注
                    </div>
                    <div class="canClick myCenter"  v-else-if="!isMe" @click="jumpNeedToken('/login')">
                        未登入
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
import request from '@/utils/request';
import { jump,jumpNeedToken } from '@/utils/commonFunction';
export default {
    name: 'authorInfo',
    props: {
        userInfo: {
            type: Object,
            default: () => {
                return {
                    nickname: "红豆面包",
                    avatar: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1qczlT.img?w=768&h=723&m=6&x=366&y=344&s=383&d=383",
                    allViews: 100,
                    articlenum: 100,
                    fensNum: 100,
                    ipAddress: "北京市",
                    signature: "我是一个测试个性签名"
                }
            }
        }
    },
    data() {
        return {
            isMe:null,
            myInfo:null,
            // isFollow: null,
            isFollow: false,
        }
    }, 
    mounted() {
        this.myInfo=JSON.parse(localStorage.getItem('userInfo'));
    },
    updated() {
        this.isMe = this.userInfo.id == this.myInfo.id;
        console.log(this.userInfo.id);
        console.log(this.myInfo.id);
        console.log(this.isMe);
        this.getIsFollow()
    },
    methods: {
        jump,
        jumpNeedToken,
        toChat() {
            this.$message({
                message: '功能正在开发中',
                type: 'warning'
            });
        },
        follow(flag) {
            request.post("/user_follows", {
                followedId: this.userInfo.id,
                isFollow: flag
            }).then(res => {
                if (res.code == 200) {
                    this.isFollow = !this.isFollow;
                }
            })
        },
        getIsFollow(){
            request.get(`/user_follows/${this.userInfo.id}`).then(res => {
                if (res.code == 200) {
                    this.isFollow = res.data;
                    console.log(this.isFollow);
                }
            })
        }
    },
}
</script>